<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/work/banner1.png" />
      <div class="banner-tx">
        <p class="ft48">CAREER！</p>
        <template v-if="lang === 'en'">
          <p>IF YOU WANT TO MAKE A DIFFERENCE,</p>
          <p>THE DOOR OF ZOETENG IS</p>
          <p>ALWAYS OPEN FOR YOU!</p>
        </template>
        <template v-else>
          <p>如果您想有所作为，</p>
          <p>硕腾的大门随时为您打开！</p>
        </template>
      </div>
    </div>
    <div class="main">
      <navbar></navbar>
      <div v-for="item in list" :key="item.id" class="row">
        <img src="@/assets/images/work/joinus-01.png" alt="" />
        <div class="flex-1">
          <p class="blue ft-22">
            {{ item[`job${capitalizeLang}`] }}
            <span class="ft-16">{{ item[`companyName${capitalizeLang}`] }}</span>
          </p>
          <p class="mt-18">
            · {{ $t('work.joinus.department') }}：{{ item[`department${capitalizeLang}`] }} <br />
            · {{ $t('work.joinus.post') }}：{{ item[`job${capitalizeLang}`] }}<br />
            · {{ $t('work.joinus.addres') }}：{{ item[`place${capitalizeLang}`] }} <br />
            · {{ $t('work.joinus.experience') }}：{{ item[`experience${capitalizeLang}`] }}<br />
          </p>
          <div class="detail active">
            <span class="flex-shrink">· {{ $t('work.joinus.qualifications') }}：</span>
            <p v-for="dItem in item.duties" :key="dItem.id">
              {{ dItem[`description${capitalizeLang}`] }}
            </p>
          </div>
          <div class="detail" :class="{ active: active[item.id] }">
            <span class="flex-shrink">· {{ $t('work.joinus.benefits') }}：</span>
            <p v-for="dItem in item.duties" :key="dItem.id">
              {{ dItem[`description${capitalizeLang}`] }}
            </p>
          </div>
          <div class="detail" :class="{ active: active[item.id] }">
            <span class="flex-shrink">· {{ $t('work.joinus.duties') }}：</span>
            <p v-for="duItem in item.duties" :key="duItem.id">
              {{ duItem[`description${capitalizeLang}`] }}
            </p>
          </div>
          <p class="mt-18 grey">
            {{ $t('work.joinus.deadline') }}：{{ item.applyEndTime }}
            <span class="ml-50">{{ $t('work.joinus.releaseTime') }} : {{ item.createTime }}</span>
            <span v-if="active[item.id]" class="contact" @click="contactVisible = true">{{
              $t('common.contact')
            }}</span>
            <span class="more" @click="more(item.id)">
              {{ active[item.id] ? $t('common.collapse') : $t('common.learnMore') }}
            </span>
          </p>
        </div>
      </div>
    </div>
    <contact-dialog-web v-if="contactVisible" :show.sync="contactVisible"></contact-dialog-web>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Navbar from '../navbar'
import ContactDialogWeb from '@/container/default/contact-dialog-web.vue'

export default {
  components: {
    Navbar,
    ContactDialogWeb,
  },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      active: {},
      contactVisible: false,
    }
  },
  computed: {
    ...mapState(['lang']),
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    more(id) {
      this.$set(this.active, id, !this.active[id])
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  .pd(0, 0, 100, 0);

  .banner {
    display: flex;
    position: relative;

    img {
      width: 100%;
    }

    .banner-tx {
      width: 100%;
      .pd(180, 0, 0, 360);
      .ft(36);

      position: absolute;
      font-weight: bold;
      color: #fff;

      .ft48 {
        .ft(48);

        color: #949596;
      }
    }
  }
}

.main {
  .width(1200);

  margin: 0 auto;

  .row {
    .pd(20, 30, 20, 30);
    .mg(40, 0, 20, 0);

    box-shadow: 0 3px 7px 0 rgba(35, 24, 21, 0.11);
    background: #fff;
    border-radius: 2px;
    display: flex;

    &:hover {
      background: #f6f7f9;
    }

    &:nth-child(1) {
      background: #f6f7f9;
    }

    img {
      .width(82);
      .height(82);
      .mg(0, 30, 0, 0);

      display: block;
    }

    .flex-1 {
      flex: 1;
      .ft(16);

      .ft-22 {
        .ft(22);

        font-weight: bold;
      }

      .ft-16 {
        .mg(0, 0, 0, 15);

        color: #777;
        font-weight: 400;
      }
    }

    .mt-18 {
      .mg(18, 0, 0, 0);
    }

    .ml-50 {
      .mg(0, 0, 0, 50);
    }

    .grey {
      color: #777;
    }

    .detail {
      .maxHeight(0);
      .mg(0, 0, 4, 0);
      overflow: hidden;
      transition: all 0.3s linear;

      &.active {
        .maxHeight(1000);
      }

      p {
        .pd(0, 0, 0, 60);
      }
    }

    .flex-shrink {
      flex-shrink: 0;
    }

    .more {
      float: right;
      color: #0261bc;
      cursor: pointer;
    }

    .contact {
      float: right;
      color: #0261bc;
      cursor: pointer;
      .mg(0, 0, 0, 20);
    }
  }
}
</style>
